<template>
  <div class="vr-header">
    <div class="header-container">
      <div class="left-logo">
        <div class="logo-name"><img src="/src/assets/Home/Vrlib.svg" alt="" @click="goRouter('home')" /></div>
        <div class="logo-school">星海音乐学院</div>
      </div>
      <div class="right-featureBtn">
        <div class="login" @click="userLoginMesk.meskBtn"><el-button plain>登录</el-button></div>
        <ul class="map">
          <li>
            <span class="ani iconfont icon-site"></span>
            <span>虚拟排架</span>
          </li>
          <li>
            <span class="ani iconfont icon-bookshelf"></span>
            <span>我的书架</span>
          </li>
          <li>
            <span class="ani iconfont icon-rec"></span>
            <span>图书荐购</span>
          </li>
          <li>
            <span class="ani iconfont icon-map"></span>
            <span>地图</span>
          </li>
        </ul>
        <div class="theme">
          <el-switch
            v-model="DarkAct"
            style="--el-switch-on-color: #2c2c2c; --el-switch-off-color: #f6f6f7; --el-switch-border-color: #dcdfe6"
            size="large"
            inline-prompt
            @change="toggle()"
            :active-action-icon="Moon"
            :inactive-action-icon="Sunny" />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useDark, useToggle } from '@vueuse/core';
import { Sunny, Moon } from '@element-plus/icons-vue';
import { userLogin } from '@/stores/modules/loginData';
import { useVrlibStore } from '@/stores/modules/vrlibStore';
const useStore = useVrlibStore();
const router = useRouter();
const goRouter = (url: string) => {
  router.push({
    name: url,
    query: { a: useStore.mlib },
  });
};
const userLoginMesk = userLogin();

const isDark = useDark();
const DarkAct = ref(isDark.value);
const toggle = useToggle(isDark);
</script>
<style scoped lang="scss">
@keyframes anicc {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-3px);
  }
  50% {
    transform: translateY(-7px);
  }
  75% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(0px);
  }
}
@media screen and (min-width: 1440px) {
  .header-container {
    max-width: calc(var(--vp-screen-max-width));
  }
}

@media screen and (min-width: 1680px) {
  .header-container {
    max-width: calc(var(--vp-screen-max-width));
  }
}
.vr-header {
  position: fixed;
  width: 100%;
  padding: 10px 24px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid var(--el-border-color);
  box-sizing: border-box;
  background-color: var(--bgcolor-white);
  z-index: var(--index-1);
  .header-container {
    @include center-round;
    margin: 0 auto;
  }

  .left-logo {
    .logo-name {
      cursor: pointer;
      img {
        width: 150px;
      }
      margin-bottom: 2px;
    }
    .logo-school {
      color: var(--text-color-primary);
    }
  }
  .right-featureBtn {
    color: var(--text-color-primary);
    display: flex;
    align-items: center;
    .login {
      margin-right: 20px;
    }
    .map {
      display: flex;

      li {
        cursor: pointer;
        display: flex;
        align-items: center;
        flex-direction: column;
        font-size: 13px;
        min-width: 70px;
        margin-right: 4px;

        .ani {
          font-size: 30px;
          margin-bottom: 3px;
        }
        &:hover {
          color: var(--el-color-primary);
          .ani {
            animation-name: anicc;
            animation-duration: 0.3s;
          }
        }
      }
    }
  }
}
</style>
